<template>
    <div style="width:100%;padding:10px;height:calc(100vh - 20px);overflow-y:auto">
        <div style="margin-bottom:10px">
            <el-button icon="el-icon-arrow-left" type="text" style="padding:10px" @click="goBack">返回</el-button>
        </div>
        <div style="width:100%">
            <div class="item">活动基本信息</div>
           <ActiveDetailVue :data="active"></ActiveDetailVue>
        </div>
        <div>
            <div class="item">参与人列表</div>
            <div>
                <!-- 参与人列表 -->
                <el-table
                    :data="applicationList"
                    v-loading="loading"
                    max-height="300"
                    style="width: 100%">
                    <el-table-column
                        prop="id"
                        label="编号"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="auser.username"
                        label="学号"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="auser.nickname"
                        label="姓名">
                    </el-table-column>
                    <el-table-column
                        prop="auser.department"
                        label="院系">
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="参与时间">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import request from '@/util/request'
import ActiveDetailVue from '../../components/server/ActiveDetail.vue'
export default {
    data(){
        return{
            active:{},
            applicationList:[],
            activeId:null,
            loading: false
        }
    },
    components:{ActiveDetailVue},
    methods:{
        getActive(id){
            request.get(`/admin/active/one?id=${id}`).then((res) => {
                console.log('获取成功：',res)
                this.active = res.data
                this.activeId = res.data.activeInfo.id
            })
            .catch(err =>{
                if (err.response) {
                    this.$notify.error(err.message)
                } else {
                    this.$notify.error('网络错误')
                }
            })
        },
        goBack(){
            this.$router.go(-1)
        },
        getApplication(){
            console.log('---->',this.active,this.activeId);
            request.get(`/admin/active/application?activeId=${this.activeId}`).then((res) => {
                this.applicationList = res.data
                console.log('res----',res);
            })
            .catch(err =>{
                
            })
        }
        
    },
    mounted(){
        this.loading = true
        this.getActive(this.$route.query.id)
        setTimeout(()=>{
            this.getApplication()
            this.loading = false
        },500)
    }
}
</script>

<style lang="scss" scoped>
.item{
    padding: 8px 15px;
    border-left: 3px #eee solid;
    margin-bottom: 5px;
}
</style>